import React, { useState } from 'react';
import './styles.css';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();
    console.log('登录信息:', { username, password });
    // 这里可以添加实际的登录逻辑
  };

  return (
    <div className="login-container">
      <div className="login-box">
        <h1>欢迎登录</h1>
        <form onSubmit={handleLogin}>
          <div className="input-group">
            <input
              type="text"
              placeholder="请输入账号"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </div>
          <div className="input-group">
            <input
              type="password"
              placeholder="请输入密码"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="login-button">登录</button>
        </form>
        <div className="register-link">
          <span>没有账号？</span>
          <a href="#">立即注册</a>
        </div>
      </div>
    </div>
  );
};

export default Login;